.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.chat-item {
  /* 清除浮动 */
  display: flow-root;
  overflow: hidden;
  margin-bottom: 16px;
}
.message-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 80%;
  margin-bottom: 16px;
}

.message-wrapper.sender {
  float: right;
}

.message-wrapper.receiver {
  float: left;
}

.avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.message {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  word-break: break-all;
  max-width: 100%;
}

.receiver .message {
  background-color: #fff;
  margin-right: 48px;
}

.sender .message {
  background-color: #0086f6;
  color: #fff;
  margin-left: 48px;
}
